<template>
	<view class="applySales">
		<view class="top">
			<view class="goods">
				<image :src="productInfo.product_picture" mode="aspectFill"></image>
				<view class="right">
					<text>{{productInfo.product_name}}</text>
					<text>{{productInfo.sku_name}}</text>
					<view class="num">
						<text>
							{{productInfo.price > 0 ? '￥'+productInfo.price : ''}}{{productInfo.price > 0 && productInfo.point_exchange > 0 ? ' + ' : ''}}{{productInfo.point_exchange > 0 ? productInfo.point_exchange+'豆力' : ''}}
						</text>
						<text>x{{productInfo.num}}<text v-if="productInfo.refund_num > 0" style="color: #dd0000;margin-left: 10rpx;">(已售后{{productInfo.refund_num}}件)</text></text>
					</view>
				</view>
			</view>
			<view class="type">
				<text>售后类型</text>
				<view class="type_name">
					<view :class="item.itemId == formData.refund_type ?'item sel':'item'" v-for="(item,index) in returnOption.return_type" :key="item.itemId" @click="selReturnTypeFun(item.itemId)">
						{{item.itemName}}
					</view>
				</view>
			</view>
		</view>
		<view class="line">
			<text>售后原因</text>
			<text class="select" @click="selReason()">{{default_reason}}</text>
			<view class="reason" v-if="is_sel_reason">
				<view :class="item.itemId == formData.refund_reason ?'name sel':'name'" v-for="(item,index) in returnOption.refund_reason" :key="item.itemId" @click="selReturnReasonFun(item)">
					{{item.itemName}}
				</view>
			</view>
		</view>
		<view class="line">
			<text>售后数量</text>
			<input class="numInput" type="number" placeholder="售后数量" v-model="formData.num" />
		</view>
		<view class="line1">
			<text>售后说明</text>
			<textarea maxlength="500" value="" placeholder="选填..." v-model="formData.refund_remark"/>
		</view>
		<view class="line2">
			<text>上传凭证</text>
			<view class="item">
				<view v-for="(item,index) in imgList" :key="index" class="item_list" v-if="item.imgUrl">
					<image :src="item.imgUrl" v-if="item.imgUrl" mode="aspectFill"></image>
					<image class="del" @click="delImg(index)" src="../../static/img/del1.png" mode="aspectFill"></image>
				</view>
				<view class="up" @click="getimg">
					<text>+</text>
					<text>最多三张</text>
				</view>
			</view>
		</view>
		<view class="bottom" @click="subForm()">
			提交申请
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
			  productInfo: {},
			  returnOption : [],
			  is_sel_reason : false,
			  default_reason: "请选择",
			  imgList: [{"imgUrl": '', "imgPaht": ''},{"imgUrl": '', "imgPaht": ''},{"imgUrl": '', "imgPaht": ''}],
			  imgNum : 0,
			  formData: {
					id: 0,
					num: 0,
					refund_type: 1,
					refund_reason: 0,
					refund_remark: '',
					refund_covers: '',
			  }
			}
		},
		methods: {
			getimg(){
				if(this.imgNum >= 3) {
					return ;
				}
				uni.chooseImage({
					sizeType: ['compressed'],
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: serve.apiUrl()+'/v1/file/images?appkey='+ uni.getStorageSync('appkey'),
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'access-token': uni.getStorageSync('access-token'),
				            },
				            success: (uploadFileRes) => {
				            	let result = JSON.parse(uploadFileRes.data);
				            	if(result.code == 200) {
									for (let key in this.imgList) {
										if(this.imgList[key].imgUrl == ""){
											this.imgList[key].imgUrl = result.data.imgUrl;
											this.imgList[key].imgPaht = result.data.imgPath;
											this.imgNum++;
											this.$forceUpdate();
											return ;
										}
									}
				            	} else {
				            		uni.showToast({
				            			title: result.message,
										icon: 'none'
				            		})
				            	}
				            }
				        });
				    }
				});
			},
			delImg(key) {
				this.imgList[key].imgUrl = '';
				this.imgList[key].imgPaht = '';
				this.imgNum--;
			},
			getInfo() {
				var self = this;
				serve.request({
					url: '/member/order-product/view',
					data:{
						id: self.formData.id
					}
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									uni.redirectTo({
										url: '/pages/my/myOrder'
									});
								}, 2000) 
							}
						});
						return ;
					}
					self.productInfo = res.data.info;
					self.formData.num = res.data.info.refundNum;
					self.returnOption = res.data.option;
				});
			},
			selReason(){
				this.is_sel_reason = this.is_sel_reason ? false : true;
			},
			selReturnTypeFun(itemId) {
				this.formData.refund_type = itemId;
			},
			selReturnReasonFun(item) {
				this.formData.refund_reason = item.itemId;
				this.default_reason = item.itemName;
				this.is_sel_reason = false;
			},
			subForm() {
				var self = this;
				let covers = '[';
				let is_first = false;
				self.imgList.forEach((item, key) => {
					if(item.imgPaht != '') {
						covers += (is_first ? ',' : '') + '"'+item.imgPaht+'"';
						is_first = true;
					}
				});
				covers += ']';
				self.formData.refund_covers = covers;
				serve.request({
					url: '/member/order-customer/refund-apply',
					data: self.formData
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						return ;
					}
					uni.showToast({
						title: "申请成功",
						icon: 'none',
						success() {
							setTimeout(function () {
								uni.redirectTo({
									url: '/pages/my/saleDatails?id='+res.data
								});
							}, 2000) 
						}
					});
				});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.formData.id=options.id || 0;
			if(this.formData.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('my_order_list')
						}, 2000) 
					}
				});
			}
			this.getInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh(); //结束下拉加载状态
			}, 1000);
		}
	}
</script>

<style scoped lang="scss">
	.applySales{
		padding-bottom: 100upx;
		width: 100%;
		.top{
			box-sizing: border-box;
			padding-left: 30upx;
			width: 100%;
			border-bottom: 16upx rgba(252,252,253,1) solid;
			.goods{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 30upx 30upx 30upx 0upx;
				width: 100%;
				border-bottom: 1upx rgba(235,236,240,1) solid;
				image{
					width:170upx;
					height:170upx;
				}
				.right{
					width: 505upx;
					display: flex;
					margin-left: 17upx;
					flex-direction: column;
					justify-content: center;
					font-size:32upx;
					text:first-child{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.num{
						display: flex;
						justify-content: space-between;
						margin-top: 40upx;
						color:rgba(255,198,0,1);
						font-size: 24upx;
						text:last-child{
							font-size: 28upx;
							color:rgba(60,72,104,0.5);
						}
					}
				}
			}
		    .type{
				box-sizing: border-box;
				padding: 40upx 0upx 48upx;
				font-size: 32upx;
				width: 100%;
				.type_name{
					margin-top: 23upx;
					display: flex;
					.sel{
						background:rgba(255,200,10,1);
						border:1px solid rgba(255,200,10,1);
						color: #FFFFFF !important;
					}
					.item{
						padding: 0upx 32upx;
						height:72upx;
						line-height: 72upx;
						text-align: center;
						font-size:28upx;
						color:rgba(60,72,104,0.5);
						border:1px solid rgba(60,72,104,0.05);
						margin-right: 30upx;
					}
				}
			}
		}
	    .line{
			display: flex;
			box-sizing: border-box;
			font-size:32upx;
			justify-content: space-between;
			padding:34upx 30upx;
			position: relative;
			width: 100%;
			border-bottom: 16upx rgba(252,252,253,1) solid;
			.select{
				position: relative;
				// color:rgba(60,72,104,0.2);
				padding-right: 30upx
			}
			.select::after{
				position: absolute;
				right: 0upx;
				top: 18upx;
				content: '';
				border: 1upx solid rgba(57, 72, 107, 0.5);
				border-width: 0 3upx 3upx 0;
				padding: 6upx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
			.reason{
				position: absolute;
				right: 0upx;
				top: 110upx;
				background: #FCFCFD;
				width: 300upx;
				display: flex;
				align-items: center;
				flex-direction: column;
				z-index: 20;
				.name{
					height: 60upx;
					line-height: 60upx;
					font-size: 30upx;
					width: 100%;
					text-align: center;
				}
				.sel{
					background: #FBCA3F;
					color:#FFFFFF ;
				}
			}
			.numInput {
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
				padding: 0 8rpx;
				width: 120rpx;
			}
		}
		.line1{
			display: flex;
			box-sizing: border-box;
			font-size:32upx;
			flex-direction: column;
			padding:36upx 30upx;
			width: 100%;
			textarea{
				position: relative;
				box-sizing: border-box;
				z-index: 10;
				width: 100%;
				height: 140upx;
				padding: 24upx 27upx;
				background:rgba(252,252,253,1);
				border-radius:12upx;
			}
		}
		.line2{
			display: flex;
			box-sizing: border-box;
			font-size:32upx;
			flex-direction: column;
			padding:0upx 30upx 36upx;
			width: 100%;
			.item{
				display: flex;
				flex-wrap: wrap;
				image {
					width:128upx;
					height:128upx;
					margin-right: 20upx;
					margin-top: 30upx;
				}
				.item_list{
					position: relative;
					.del{
						position: absolute;
						width: 36upx !important;
						height: 36upx !important;
						top:-18upx;
						right: -18upx;
					}
				}
				.up{
					margin-top: 30upx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width:128upx;
					height:128upx;
					border:1px solid rgba(60,72,104,0.2);
					border-radius:8upx;
					font-size:18upx;
					color:rgba(60,72,104,0.5);
					text:first-child{
						font-size: 60upx;
						color:rgba(60,72,104,1);
					}
				}
				
			}
		}
	    .bottom{
			position: fixed;
			bottom: 0upx;
			height:100upx;
			width: 100%;
			background:rgba(251,202,63,1);
			color: #FFFFFF;
			text-align: center;
			line-height: 100upx;
			font-size:32upx;
		}
	}
</style>
